<script setup lang="ts">
withDefaults(
  defineProps<{
    text?: string,
    lineClamp?: number,
    trigger?: "hover" | "click" | "focus" | "contextmenu",
  }>(),
  {
    text: "",
    lineClamp: 1,
    trigger: "hover"
  }
);
</script>

<template>
  <div
    class="text-ellipsis-popover text-ellipsis-line-clamp"
    :style="{'-webkit-line-clamp': lineClamp}"
  >
    <n-popover :trigger="trigger">
      <template #trigger>
        <span>{{ text }}</span>
      </template>
      <span>{{ text }}</span>
    </n-popover>
  </div>
</template>
